/*(function($){
	var initLayout = function() {
		var hash = window.location.hash.replace('#', '');
		var currentTab = $('ul.navigationTabs a')
							.bind('click', showTab)
							.filter('a[rel=' + hash + ']');
		if (currentTab.size() == 0) {
			currentTab = $('ul.navigationTabs a:first');
		}
		showTab.apply(currentTab.get(0));
		//$('#colorpickerHolder').ColorPicker({flat: true});


		$('.colorPickerField').ColorPicker({
			onSubmit: function(hsb, hex, rgb, el) {

                            //alert($(el).next('.squareColor')+ "----"+hex)

				$(el).val(hex);
				$(el).ColorPickerHide();
			},
			onBeforeShow: function () {
				$(this).ColorPickerSetColor(this.value);
			}
		})
		.bind('keyup', function(){
			$(this).ColorPickerSetColor(this.value);
		});

	};

	var showTab = function(e) {
		var tabIndex = $('ul.navigationTabs a')
							.removeClass('active')
							.index(this);
		$(this)
			.addClass('active')
			.blur();
		$('div.tab')
			.hide()
				.eq(tabIndex)
				.show();
	};

	EYE.register(initLayout, 'init');

*/



function colorPicker(){

//
    $('.colorPickerField').ColorPicker({
	onSubmit: function(hsb, hex, rgb, el) {
                $(el).parent().children().filter('.squareColor').css('background-color', '#' + hex);
		$(el).val(hex);
		$(el).ColorPickerHide();
	},
	onBeforeShow: function () {
		$(this).ColorPickerSetColor(this.value);
	}
})
.bind('keyup', function(){
	$(this).ColorPickerSetColor(this.value);
});


}


$(document).ready(function(){

    colorPicker()
    var inerHtml = $('#colors').html();
//var cont = 0;
add(inerHtml)

});


function replaceIds(innerHtml, cont){


innerHtml = innerHtml.replace('colorName0','colorName' + cont);
innerHtml = innerHtml.replace('colorDescription0','colorDescription' + cont);
innerHtml = innerHtml.replace('colorpickerField0','colorpickerField' + cont);
innerHtml = innerHtml.replace('icon0','icon' + cont);
innerHtml = innerHtml.replace('squareColor0','squareColor' + cont);
cont++;

 return innerHtml;
}

var cont = 1;

function add(inerHtml){



       $('.add:last').click(function() {


        var inHtml = replaceIds(inerHtml,cont);
        $('#add').before(inHtml);

alert(cont);
alert($('#maxNumber').attr('value'));
        $('#maxNumber').attr('value', cont)
        cont++;


       add(inerHtml)

       colorPicker()

       $(this).attr('src','jsp/images/Remove.png')
       $(this).attr('class','remove')
       $(this).unbind('click');
      //$(this).parents().filter('table').find('input').attr("disabled", true);
       $(this).click(function() {

          $(this).parents().filter('table').remove();




       });





    });





}


/*
innerHtml = html code to insert
elementIdsArray = array of the name attribute of the elements used for identificate it in the form
firstId = the name of the elements must be name + number the firstId is the fist number (e.g. 0)
idDivName = we will insert the html code after the element with this id.
*/
function addDinamicHtml(classOnClickElement,innerHtml,elementOriginalNameArray,elementNewNameArray,addBefore,firstId){


    $('.'+classOnClickElement).click(function() {
        var inHtml = replaceDinamiclyIds(innerHtml,elementOriginalNameArray,elementNewNameArray,firstId);
        $('#add').before(inHtml);

            $('#maxNumber').attr('value', cont)
        cont++;


       add(inerHtml)

       colorPicker()

       $(this).attr('src','jsp/images/Remove.png')
       $(this).attr('class','remove')
       $(this).unbind('click');
      //$(this).parents().filter('table').find('input').attr("disabled", true);
       $(this).click(function() {

          $(this).parents().filter('table').remove();




       });





    });



}




function replaceDinamiclyIds(innerHtml,elementOriginalNameArray,elementNewNameArray,firstId){

    for(i =firstId; i<elementNameArray.length + firstId; i++){
        innerHtml = innerHtml.replace(elementOriginalNameArray[i],elementNewNameArray[i] + cont);
    }

    cont++;
    return innerHtml;
}



//})(jQuery)